<template>
  <div class="container">
    <!--      学校名称-->
    <van-cell title="学校名称" required/>
    <div class="input_">
      <div class="input_">
        <van-field
          v-model="school_name"
          name="school_name"
          placeholder="输入您的公司名称"
          :rules="[{ required: true, message: '请填写您的学校名称' }]"
        />
      </div>
    </div>
    <!--    学历-->
    <van-cell title="学历" required/>
    <div class="input_">
      <van-field
        is-link
        readonly
        clickabler
        name="edu_background"
        :value="value1"
        placeholder="点击选择学历"
        @click="showPicker1 = true"
        :rules="[{ required: true, message: '请填写您的学历' }]"
      />
    </div>
    <van-popup v-model="showPicker1" position="bottom" :style="{ height: '40%' }" round>
      <van-picker
        show-toolbar
        :columns="columns1"
        @confirm="onConfirm1"
        @cancel="showPicker1 = false"
      />
    </van-popup>
    <!--      专业名称-->
    <van-cell title="专业名称" required/>
    <div class="input_">
      <div class="input_">
        <van-field
          v-model="major_name"
          name="major_name"
          placeholder="输入您的专业名称"
          :rules="[{ required: true, message: '请填写您的公司名称' }]"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Content-input',
  data () {
    return {
      school_name: '',
      edu_background: '',
      showPicker1: false,
      columns1: ['小学', '中学', '本科', 'MBA'],
      major_name: '',
      value1: ''
    }
  },
  methods: {
    onConfirm1 (value) {
      this.value1 = value
      this.showPicker1 = false
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-cell {
  padding: 5px 16px;
  border-radius: 8px;
}

.container {
  padding: 5px 10px;
}

.input_ {
  border: 1px solid #cccccc;
  border-radius: 8px;
}
</style>
